<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var user = plus.webview.currentWebview().data;
				var from_apply = plus.webview.currentWebview().from_apply;
				if (user.remark != null && user.remark != "") {
					document.getElementById("remark").style.color = "#2b2b2b";
					document.getElementById("remark").innerText = "("+user.remark+")";
				}
				if (user.miniAvatar != null) {
					document.getElementById("avatar").src = user.miniAvatar;
				}
				if (user.sex != null && user.sex == 1) {
					document.getElementById("sex").src = './image/boy.png';
				}
				if (user.sex != null && user.sex == 2) {
					document.getElementById("sex").src = './image/girl.png';
				}
				if (user.signature != null) {
					document.getElementById("signature").innerText = user.signature;
				}
				if (user.isFriend == 1) {
					// 已经是好友 隐藏添加按钮 并显示发消息按钮
					document.getElementById('add_btn').style.display = "none";
					document.getElementById('send_msg').style.display = "block";
				}
				// 从申请页面过来的 改成同意按钮
				if (from_apply == 2) { // 我添加对方 不显示同意和申请按钮
					// 已经是好友 隐藏添加按钮 并显示发消息按钮
					document.getElementById('add_btn').style.display = "none";
					document.getElementById('agree').style.display = "none";
				}
				if (from_apply == 1) { // 对方添加我 显示同意按钮
					// 已经是好友 隐藏添加按钮 并显示发消息按钮
					document.getElementById('add_btn').style.display = "none";
					document.getElementById('agree').style.display = "block";
					
					//同意申请
					document.getElementById("agree").addEventListener("tap",function(){
						// 跳转到备注页
						mui.openWindow({
							url: 'friend_agree.html',
							id: 'friend_agree.html',
							extras: { // 向新页面传参
								'data': user,
							}
						});
						// 同意成功后 隐藏同意按钮 显示发消息按钮
						document.getElementById('send_msg').style.display = "block";
					})
				}
				document.getElementById('username').innerText = user.nickname;
				document.getElementById('area').innerText = user.area;
				
				
				if (user.from == 'friend') { // 来自好友列表 只显示发消息按钮
					document.getElementById('add_btn').style.display = "none";
					document.getElementById('send_msg').style.display = "block";
				}
				
				// 添加好友逻辑
				document.getElementById("add_btn").addEventListener("tap",function(){
					// 打开好友认证页
					mui.openWindow({
						url: "friend_auth.html",
						id: "friend_auth.html",
						extras: {
							"fid": user.id
						}
					})
				})
				
				var friend_info = user;
				// 跳转至聊天界面
				document.getElementById("send_msg").addEventListener("tap",function(){
					// 打开好友认证页
					mui.openWindow({
						url: "chat_page.html",
						id: "chat_page_"+friend_info.id, // 页面id不能重复
						extras: {
							"data": friend_info
						}
					})
				})
			})
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="box-shadow: none;background-color: #fff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		
		<ul class="mui-table-view" style="height: 140px; display: flex; align-items: center;">
		    <li class="mui-table-view-cell mui-media" style="width: 100%; margin-top: 25px;"  id="go_my_info">
		        <div style="display: flex;">
		            <a href="javascript:;">
		                <img id="avatar" class="mui-pull-left profile-pic" src="">
		                <div class="mui-media-body" style="padding-left: 15px; margin-top: 6px; height: 65px; width: 100%;">
		                    <div style="display: flex;">
								<h2 id="username">用户名</h2>
								<div id="remark"></div>
								<img id="sex" class="mui-pull-left profile-pic" src=""  style="width: 20px; height: 20px;margin-left: 10px;">
							</div>
		                    <p class="mui-ellipsis">地区:  <label id="area"></label></p>
							<a href="javascript:;" class="status_two" style="display:flex;align-items: center;justify-content: center;margin-left: 60px;"></a>
		                </div>
		            </a>
		        </div>
		    </li>
		</ul>
		
			
		<ul class="mui-table-view" style="margin-top: -10px;">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right iconfont icon-chatshezhi" style=""><label class="text">设置备注和标签</label></a>
			</li>
		</ul>
		<ul class="mui-table-view" style="margin-top: 8px; margin-bottom: 8px;">
			<li class="mui-table-view-cell" style="display: flex;">
				<label class="text" style="width: 75px;">个性签名</label> 
				<label style="padding-left: 25px; color: #666; font-size: 15px;" id="signature"></label>
			</li>
			<li class="mui-table-view-cell"> 
				<label class="text" style="width: 70px;">来源</label>
				<label style="padding-left: 25px; color: #666; font-size: 15px;">来自账号搜索</label>
			</li>
		</ul>
		
		<!-- <div class="mui-button-row"> -->
			<button type="button" id="add_btn" class="mui-btn mui-btn-success" style="width: 100%;height: 40px;background-color: #fff;border: none;color: darkblue;">添加到通讯录</button>
		<!-- </div> -->
		
		<!-- <div class="mui-button-row"> -->
			<button type="button" id="send_msg" class="mui-btn mui-btn-success" style="width: 100%;height: 40px;background-color: #fff;border: none;color: darkblue;display: none;">发消息</button>
		<!-- </div> -->
		
		<!-- <div class="mui-button-row"> -->
			<button type="button" id="agree" class="mui-btn mui-btn-success" style="width: 100%;height: 40px;background-color: #fff;border: none;color: darkblue;display: none;">同意申请</button>
		<!-- </div> -->
		
	</body>

</html>

<style>
    /* 头像 */
    .profile-pic {
        width: 60px;
        height: 60px;
        border-radius: 18%;
        object-fit: cover;
        margin: 0 auto;
        display: block;
    }

    /* 昵称 */
    .mui-media-body h2 {
        margin: 0;
        font-size: 20px;
        color: black;
    }

    /* 微信号 */
    .mui-media-body p {
        margin: 10px 0 0 0;
        color: #666;
    }
	
	.iconfont{
		font-size: 19px;
		line-height: 25px;
	}
	.text{
		display: inline-block;
		font-size: 14px;
		line-height: 20px;
		padding-left: 10px;
		align-items: center;
		margin-bottom: 4px;
	}
</style>